<template>
  <a-modal
    :open="open"
    :title="title"
    :width="width"
    :confirm-loading="loading"
    :mask-closable="maskCloseable"
    centered
    @cancel="emit('cancel')"
    @ok="emit('ok')"
  >
    <template
      v-for="name in Object.keys(slots).filter((f) => f != 'footer')"
      #[name]="slotProps"
    >
      <slot :name="name" v-bind="slotProps || {}"></slot>
    </template>
    <template #footer>
      <slot v-if="slots.footer"></slot>
      <template v-else-if="footer">
        <a-button @click="emit('cancel')"> <LogoutOutlined />取消 </a-button>
        <a-button type="primary" :loading="loading" @click="emit('ok')">
          <CheckCircleOutlined />确定
        </a-button>
        <slot name="otherBtn"></slot>
      </template>
    </template>
    <slot></slot>
  </a-modal>
</template>
<script lang="ts" setup name="DysModal">
interface Props {
  /**弹窗 */
  open: boolean;
  /**标题 */
  title: string;
  /**宽度 */
  width?: number;
  /**加载 */
  loading?: boolean;
  /**点击蒙层关闭 */
  maskCloseable?: boolean;
  /**展示按钮 */
  footer?: boolean;
}
withDefaults(defineProps<Props>(), {
  maskCloseable: false,
  loading: false,
  footer: true,
});
const emit = defineEmits(["cancel", "ok"]);
const slots = defineSlots();
</script>
